<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
                /* css初始化 */
        /* 把我们所有标签的内外边距清零 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 去掉li 的小圆点 */
        li {
            list-style: none
        }

        img {
            /* border 0 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
            border: 0;
            /* 取消图片底侧有空白缝隙的问题 */
            vertical-align: middle
        }

        button {
            /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
            cursor: pointer
        }

        a {
            /* a标签默认样式太丑了，我们换个耐看的颜色 */
            color: #666;
            text-decoration: none;
            outline: none;
        }

        a:hover {
            /* 鼠标经过链接时，链接变成红色 */
            color: #c81623
        }

        button,
        input {
            /* 设置这两种标签的文字的首选字体，比如Microsoft YaHei就是微软雅黑 */
            /* "\5B8B\4F53" 就是宋体的unicode编码 这样浏览器兼容性比较好 */
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            outline: none;
            border: 0;
        }

        body {
            /* CSS3 抗锯齿形 让放大浏览器时文字边缘不锯齿，文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        /* 程序员为了方便隐藏自定义的类，初始化非必备，可以无视 */
        .hide,
        .none {
            display: none
        }

        /* 清除浮动，因为浮动那块的知识我有的没教，这串代码可以无视 */
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0;
        }

        .clearfix {
            *zoom: 1
        }
body{
    background-image: url("C:/Users/你好/Desktop/背景2.png");
    background-size: 100%;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
}
.header{
    height: 60px;
    background-color: rgba(255, 255, 255, 0.5);
    }
    .header-son{
        width: 1200px;
        height: 60px;
        margin: 0 auto 0 auto;
    }
    .son-left{
        float: left;
            color: rgb(121, 101, 101);
            line-height: 60px;
            font-size: 24px;
    }
    .son-right{
        float: right;
    }
    .son-right ul  li {
        float: right;
        font-size: 20px;
        color: rgb(121, 101, 101);
        line-height: 60px;
        margin-left: 10px;
    }
    .main{
        width: 1200px;
        margin: 0 auto 0 auto;
        /*background-color: #fa061a;*/
        margin-top: 20px;
    }
    .main-left{
     float: left;
     width: 425px;
     height: 900px;
    /*background-color: aqua;*/
    }
    .main-left-son1{
        width: 200px;
        height: 300px;
        /*background-color: #c81623;*/
        float: left;
        border-radius: 8px;
            overflow: hidden;
    }
    .main-left-son1 img{
        width: 100%;
        height: 100%;
    }
    .main-left-son2{
        float: right;
        width: 200px;
        height: 150px;
        /*background-color: #fa061a;*/
        border-radius: 8px;
            overflow: hidden;
            padding-bottom: 10px;
    }
    .main-left-son2 img{
        width: 100%;
        height: 100%;
    }
    .main-left-son3{
        width: 200px;
        height: 150px;
       /* background-color: #c81623;*/
        float: right;
        border-radius: 8px;
            overflow: hidden;
            padding-top: 10px;
    }
    .main-left-son3 img{
        width: 100%;
        height: 100%;
    }
    .hh1{
        color: rgb(214, 145, 145);
        width: 100px;
        height: 30px;
        padding-top: 330px;
        padding-left: 120px;
        font-size: 50px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }
    .hh2{
       /* background-color: #c81623;*/
        color: rgb(214, 145, 145);
        width: 100px;
        height: 30px;
        padding-top: 50px;
        padding-left: 200px;
        font-size: 50px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    }
    .hh3{
        /*background-color: #c81623;*/
        color: rgb(214, 145, 145);
        width: 100px;
        height: 30px;
        padding-top: 50px;
        padding-left: 150px;
        font-size: 50px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 
    }
    .hh4{
        /*background-color: #c81623;*/
        color: #f76c75;
        width: 100px;
        height: 30px;
        padding-top: 100px;
        font-size: 50px;
        font-family:'Times New Roman', Times, serif; 
    }
    .hh5{
       /*background-color: #c81623;*/
        width: 350px;
        height: 350px;
        float: right;
        padding-top: 60px;
    }
    .hh5 p{
        font-size: 17px;
        color: rgb(240, 132, 155);
    }
    .main-right1{
        width: 760px;
        height: 400px;
        /*background-color: #c81623;*/
        float: right;
        border-radius: 8px;
            overflow: hidden;
    }
    .main-right2{
        width: 760px;
        height: 230px;
        background-color:rgb(243, 215, 221);
        float: right;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 40px;
    }
    .main-right2-son{
        width: 230px;
        height: 230px;
        /*background-color: #c81623;*/
        float: left;
        border-radius: 8px;
        overflow: hidden;
    }
    .main-right2-son img{
        width: 100%;
        height: 100%;
    }
    .main-right2-son2{
        padding: 10px;
        float: left;
            width: 530px;
            height: 230px;
            background-color: black; 
            border-bottom: 1px solid gray;
    }
    .main-right-son2 p{
        font-size: 16px;
    }
    .main-right-son3 {
            float: left;
            width: 530px;
            height: 70px;
            background-color:rgb(243, 215, 221);
            border-top-style:dotted ;
            margin-top: 10px;
        }

        .main-right-son3 span {
            display: inline-block;
            line-height: 70px;
            margin-right: 15px;
            margin-left: 15px;
            font-size: 13px;
        }
         .main-right2{
        width: 760px;
        height: 230px;
        background-color:rgb(243, 215, 221);
        float: right;
        border-radius: 8px;
        overflow: hidden;
        margin-top: 40px;
    }
    .main-right2-son{
        width: 230px;
        height: 230px;
        /*background-color: #c81623;*/
        float: left;
        border-radius: 8px;
        overflow: hidden;
    }
    .main-right2-son img{
        width: 100%;
        height: 100%;
    }
    .main-right2-son2{
        padding: 10px;
        float: left;
            width: 530px;
            height: 230px;
            background-color: black; 
            border-bottom: 1px solid gray;
    }
    .main-right-son2 p{
        font-size: 16px;
    }
    .main-right-son3 {
            float: left;
            width: 530px;
            height: 70px;
            background-color:rgb(243, 215, 221);
            border-top-style:dotted ;
            margin-top: 10px;
        }

        .main-right-son3 span {
            display: inline-block;
            line-height: 70px;
            margin-right: 15px;
            margin-left: 15px;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="header">
    <div class="header-son">
        <div class="son-left">傻子一水liu~</div>
        <div class="son-right">
            <ul>
                <li><a href>首页</a></li>
                <li><a href>关于我</a></li>
                <li><a href>分类</a></li>
                <li><a href>留言板</a></li>
                <li><a href>文章</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="main-left">
     <div class="main-left-son1">
        <img src="C:/Users/你好/Desktop/长沙.jpg" alt="">
     </div>
     <div class="main-left-son2"><img src="C:/Users/你好/Desktop/背背1.jpg" alt="">
    </div>
     <div class="main-left-son3"><img src="C:/Users/你好/Desktop/背背2.jpg" alt="">
    </div>
    <div class="hh1">Welcome</div>
    <div class="hh2">to</div>
    <div class="hh3">ChangSha</div>
    <div class="hh4"><strong>湘食篇</strong></div>
    <div class="hh5"><p>&nbsp;&nbsp;&nbsp;&nbsp;湘菜，承载的是三湘大地，千年来的味觉记忆变迁。品味湘菜正是了解湖南的一扇精致之窗。在湖南，美味带给你的已不仅仅是一种味觉体验，更是一种网红打卡的旅游体验。这种打卡，不仅仅是在那些最有名的“老字号”店铺，更是一种曲径通幽，在探索之中，猛然被鲜美的味道征服，从此感慨湘菜的力量，对湖南人更添一份温情。臭豆腐、武冈卤菜、常德米粉……这些我们爱吃的美食，代代传承，已经成为了非物质文化遗产，更融入了每个湖南人的生活里。舌尖上的“非遗美味”，地道的“老字号”记忆。要说湖南都有哪些“老字号”，美食界的“老口子”可以脱口而出，接下来我将为你们介绍几道地道的湘菜。</p></div>
    </div>
    <div class="main-right1"><video src="C:/Users/你好/Desktop/视频.mp4"loop="" controls=""></video></div>
        <div class="main-right2">
            <div class="main-right2-son">
                <img src="C:\Users\你好\Desktop\剁椒鱼头.jpg" alt="">
            </div>
            <div class="main-right-son2">
                <h1>&nbsp;&nbsp;剁椒鱼头</h1>
                
                <p>&nbsp;&nbsp;&nbsp;&nbsp;以鱼头的“味鲜”和剁椒的“辣”为一体。火辣辣的红剁椒，覆盖着白嫩嫩的鱼头肉，冒着热腾腾清香四溢的香气。蒸制的方法，鱼头的鲜香被尽量保留在肉质之内，剁椒的味道又恰到好处地渗入到鱼肉当中，入口细嫩晶莹，带着一股温文尔雅的辣味。在湖南，是年夜饭上一道不可缺少的湘菜。<br><br></p>
            </div>
            <div class="main-right-son3">
                <span>2023/1/24</span>
                <span><a class="main-right-son" href="菜1.html"><u>点击查看如何制作</u></a></span>
            </div>
    
</div>
<div class="main-right2">
    <div class="main-right2-son">
        <img src="C:\Users\你好\Desktop\炒粉.jpg" alt="">
    </div>
    <div class="main-right-son2">
        <h1>&nbsp;&nbsp;蛋炒粉</h1>
        
        <p>&nbsp;&nbsp;&nbsp;&nbsp;也许大家有听说过湖南人的一天是从嗦粉开始的，其实做为一个地地道道的湖南人——我，更喜欢从一碗地道的湖南炒粉中开始一天。<br><br><br></p>
    </div>
    <div class="main-right-son3">
        <span>2023/1/24</span>
        <span><a class="main-right-son" href="菜1.html"><u>点击查看如何制作</u></a></span>
    </div>

</div>
<div class="main-right2">
    <div class="main-right2-son">
        <img src="C:\Users\你好\Desktop\辣椒炒肉.jpg" alt="">
    </div>
    <div class="main-right-son2">
        <h1>&nbsp;&nbsp;辣椒炒肉</h1>
        
        <p>&nbsp;&nbsp;&nbsp;&nbsp;是以辣椒、猪肉作为主要食材，以豆豉、大蒜子、酱油、油盐、味精、生姜老抽、生抽等作为辅料制作而成的一道菜肴，口味香辣。<br><br><br></p>
    </div>
    <div class="main-right-son3">
        <span>2023/1/24</span>
        <span><a class="main-right-son" href="菜1.html"><u>点击查看如何制作</u></a></span>
    </div>

</div>
<div class="main-right2">
    <div class="main-right2-son">
        <img src="C:\Users\你好\Desktop\手撕包菜.jpg" alt="">
    </div>
    <div class="main-right-son2">
        <h1>&nbsp;&nbsp;手撕包菜</h1>
        
        <p>&nbsp;&nbsp;&nbsp;&nbsp;手撕包菜是一道色香味俱全的汉族名菜，属于湘菜系。此菜红白相间，麻辣鲜香，爽脆清甜，除了可开胃增食欲外，还有美白祛斑、预防感冒和胃溃疡等作用。以小青包菜、蒜片、葱段、茶油、盐、味精、鸡精、生抽、高汤、醋等制作而成。<br><br></p>
    </div>
    <div class="main-right-son3">
        <span>2023/1/24</span>
        <span><a class="main-right-son" href="菜1.html"><u>点击查看如何制作</u></a></span>
    </div>

</div>

</body>
</html>